<!doctype html>
<html lang="en">

<head>
    <title>签章拖动 by xiaos</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <style>
        .tool {
            height: 60px;
        }

        .qz {
            margin: 10px;
            height: 40px;
            width: 40px;
            float: left;
        }

        .qz1 {
            background-color: red;
        }

        .qz2 {
            background-color: green;
        }

        .qz3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div style="width: 500px;margin: 0px auto;">
        <div style="text-align: center;">基于jqui 托拽和放置事件实现盖章 by xiaos</div>
        <div>工具栏</div>
        <div class="tool">
            <div class="qz qz1" type="qz1">

            </div>

            <div class="qz qz2" type="qz2">

            </div>

            <div class="qz qz3" type="qz3">

            </div>
        </div>

        <div>内容区域</div>
        <div id="content" style="background-color:rgb(116, 78, 78);height:200px;width:500px;">

        </div>
        <br />

        <button id="getqz">获取已添加签章</button>
        <button id="clertqz">清除已添加签章</button>
        <button id="loadqz">渲染签章</button>
        <br />
        <br />
        <textarea id="qzjson" style="width: 500px;height: 150px;resize: none;" readonly>
    </textarea>
    </div>
    <script>
        $(function () {
            //绑定拖动事件
            $(".tool .qz").draggable({
                containment: "document", revert: 'invalid', helper: 'clone'
            });

            //绑定放置事件
            $("#content").droppable({
                accept: ".tool .qz",
                drop: function (event, ui) {
                    var x = ui.offset.left;
                    var y = ui.offset.top;
                    var curobj;
                    //表示是从工具箱拖入
                    if (!$(ui.draggable)[0].hasAttribute("x")) {
                        //复制一份 放入内容区域
                        curobj = $(ui.draggable).clone(false);
                        $(curobj).attr("x", x);
                        $(curobj).attr("y", y);
                        $(curobj).css("position", "absolute");
                        $(curobj).css("left", x + "px");
                        $(curobj).css("top", y + "px");
                        $(curobj).css("z-index", "1000");
                        $(curobj).prependTo($("#content"));
                        //绑定拖动事件
                        $(curobj).draggable({ containment: "#content" }, {
                            //记录结束坐标
                            stop: function (event, ui) {
                                $(curobj).attr("x", ui.offset.left);
                                $(curobj).attr("y", ui.offset.top);
                            }
                        });
                    }
                }
            });

            //绑定拖动事件
            $("#content qz").draggable({ containment: "#content" }, {
                //记录结束坐标
                stop: function (event, ui) {
                    $(curobj).attr("x", ui.offset.left);
                    $(curobj).attr("y", ui.offset.top);
                }
            });

            //获取签章信息
            $('#getqz').on('click', function () {
                var arry = [];
                $('#content .qz').each(function () {
                    console.log(this);
                    arry.push(
                        {
                            type: $(this).attr('type'),
                            x: $(this).attr('x'),
                            y: $(this).attr('y'),
                        }
                    );
                });
                $('#qzjson').val(JSON.stringify(arry));

            });

            //清除签章信息
            $('#clertqz').on('click', function () {
                $('#content .qz').remove();
            });

            //加载签章信息
            $('#loadqz').on('click', function () {
                $('#clertqz').click();
                var qzjson = $('#qzjson').val();
                if (!qzjson) {
                    return;
                }
                var d = JSON.parse(qzjson);
                d.forEach(element => {
                    var curobj = $('<div></div>');
                    curobj.attr('type', element.type);
                    curobj.attr("class", "qz " + element.type);

                    curobj.attr("x", element.x);
                    curobj.attr("y", element.y);
                    curobj.css("position", "absolute");
                    curobj.css("left", element.x + "px");
                    curobj.css("top", element.y + "px");
                    curobj.css("z-index", "1000");
                    curobj.prependTo($('#content'));
                    console.log(curobj)
                    //绑定拖动事件
                    $(curobj).draggable({ containment: "#content" }, {
                        //记录结束坐标
                        stop: function (event, ui) {
                            $(curobj).attr("x", ui.offset.left);
                            $(curobj).attr("y", ui.offset.top);
                        }
                    });
                });
            });

        });
    </script>
</body>

</html>